<template>
  <div>
    <div class="list">
      <ul>
        <div v-for="(item, index) in paginatedItems" :key="index">
          <img :src="item.image" alt="图片">
          <li>{{ item.time }}</li>
          <li>{{ item.status }}</li>
          <li><a href="#">{{ item.info }}</a></li>
        </div>
      </ul>
    </div>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const items = ref([
  { image: 'image1.jpg', time: '时间1', status: '审核状态1', info: '查看上传信息' },
  { image: 'image2.jpg', time: '时间2', status: '审核状态2', info: '查看上传信息' },
  { image: 'image3.jpg', time: '时间3', status: '审核状态3', info: '查看上传信息' },
  { image: 'image4.jpg', time: '时间4', status: '审核状态4', info: '查看上传信息' },
  { image: 'image5.jpg', time: '时间5', status: '审核状态5', info: '查看上传信息' },
  { image: 'image6.jpg', time: '时间6', status: '审核状态6', info: '查看上传信息' }
]);

const currentPage = ref(1);
const itemsPerPage = ref(3);

const totalPages = computed(() => {
  return Math.ceil(items.value.length / itemsPerPage.value);
});

const paginatedItems = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value;
  const end = start + itemsPerPage.value;
  return items.value.slice(start, end);
});

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};
</script>

<style scoped>
li {
  list-style: none;
}

.list {
  width: 100%;
  margin-top: 200px;
  overflow-x: auto;
}

.list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list div {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: space-between;
  background-color: #eae2e2;
}

.list img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  margin-left: 100px;
  margin-right: 15px;
  background-color: #333;
}

.list li {
  margin-right: 100px;
  font-size: 24px;
  font-weight: bold;
}

.list a {
  color: #333;
  text-decoration: none;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 10px;
  padding: 5px 10px;
  cursor: pointer;
}

.pagination span {
  margin: 0 10px;
}
</style>
